<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jplayer</title>
    <script src="/statics/js/jquery.js"></script>
    <script src="/statics/jplayer/jquery.jplayer.js"></script>


    <script type="text/javascript">

        var global_playStatus = {
            audio: null,
            playing: false,
            lastUpdateTime: -1,
            serverStartPlayTime: -1,
            lastCheckServerTime: -1,
            lastCheckLocalTime: -1
        };

        var serverTimeTimer;

        var global_jplayer;

        $(document).ready(function () {

            // Local copy of jQuery selectors, for performance.
            global_jplayer = $("#jquery_jplayer"),
                    my_trackName = $("#jp_container .track-name"),
                    my_playState = $("#jp_container .play-state"),
                    my_extraPlayInfo = $("#jp_container .extra-play-info");

            // Some options
            var opt_play_first = false, // If true, will attempt to auto-play the default track on page loads. No effect on mobile devices, like iOS.
                    opt_auto_play = true, // If true, when a track is selected, it will auto-play.
                    opt_text_playing = "Now playing", // Text when playing
                    opt_text_selected = "Track selected"; // Text when not playing

            // A flag to capture the first track
            var first_track = true;

            // Change the time format
            $.jPlayer.timeFormat.padMin = false;
            $.jPlayer.timeFormat.padSec = false;
            $.jPlayer.timeFormat.sepMin = " min ";
            $.jPlayer.timeFormat.sepSec = " sec";

            // Initialize the play state text
            my_playState.text(opt_text_selected);

            // Instance jPlayer
            global_jplayer.jPlayer({
                ready: function () {
//                    $("#jp_container .track-default").click();

                    waitForPlayerStatusChange();
                },
                timeupdate: function (event) {
                    my_extraPlayInfo.text(parseInt(event.jPlayer.status.currentPercentAbsolute, 10) + "%");
                },
                play: function (event) {
                    my_playState.text(opt_text_playing);
                },
                pause: function (event) {
                    my_playState.text(opt_text_selected);
                },
                ended: function (event) {
                    my_playState.text(opt_text_selected);
                },
                swfPath: "../../dist/jplayer",
                cssSelectorAncestor: "#jp_container",
                supplied: "mp3",
                wmode: "window"
            });

            // Create click handlers for the different tracks
            $("#jp_container .track").click(function (e) {
                my_trackName.text($(this).text());

                var o = new Object();
                o.src = $(this).attr("href");
                o.playFrom = 0;
                o.startTime = new Date().getTime();
                $.ajax({
                    type: 'POST',
                    url: "/player/Play",
                    contentType: "application/json",
                    data: JSON.stringify(o),
                    async: true,
                });


//                global_jplayer.jPlayer("setMedia", {
//                    mp3: $(this).attr("href")
//                });
//                if ((opt_play_first && first_track) || (opt_auto_play && !first_track)) {
//                    global_jplayer.jPlayer("play");
//                }


                first_track = false;
                $(this).blur();
                return false;
            });

        });


        function checkServerTime() {
            var startCallTime = new Date().getTime();
            $.ajax({
                url: "/ajax/now",
                async: true,
                timeout: 1000,
                success: function (data, textStatus, jqXHR) {
                    if (data.ret == "0") {
                        var serverTime = data.time;
                        if (global_playStatus.playing) {

                            var endCallTime = new Date().getTime();
                            serverTime = serverTime + (endCallTime - startCallTime) / 2;

                            var severPlayed = serverTime - global_playStatus.serverStartPlayTime;
                            var localPlayed = global_jplayer.data("jPlayer").status.currentTime * 1000;
                            var duration = global_jplayer.data("jPlayer").status.duration * 1000;

                            if (duration <= severPlayed) {
                                global_jplayer.jPlayer("playHead", 100);
                            } else {
                                console.log("time diff:" + (severPlayed - localPlayed) +", serverTime:" + data.time + ", request cost:" + (endCallTime - startCallTime));
                                if (Math.abs(severPlayed - localPlayed) > 150) {
                                    global_jplayer.jPlayer("playHead", severPlayed * 100 / duration);
                                }
                            }

                        }
                    }
                }
            });
        }

        var onAudioStatusChange = function (playStatusInfo, serverTime) {

            global_playStatus.playing = playStatusInfo.playing;
            if (!playStatusInfo.playing) {
                if (serverTimeTimer) {
                    clearInterval(serverTimeTimer);
                }
                global_jplayer.jPlayer("pause");
            } else {
                if (global_jplayer.data("jPlayer").status.src != playStatusInfo.musicUrl) {
                    global_jplayer.jPlayer("setMedia", {mp3: playStatusInfo.musicUrl});
                }
                global_playStatus.serverStartPlayTime = playStatusInfo.startPlayTime;
                global_playStatus.lastCheckServerTime = serverTime;
                global_playStatus.lastCheckLocalTime = new Date().getTime();

                global_jplayer.jPlayer("play");
                alert("play:" + playStatusInfo.musicUrl);

                if (serverTimeTimer) {
                    clearInterval(serverTimeTimer);
                }
                serverTimeTimer = setInterval(function () {
                    checkServerTime();
                }, 4000);

            }
        };

        var waitForPlayerStatusChange = function () {
            $.ajax({
                url: "/status_sync/" + global_playStatus.lastUpdateTime,
                async: true,
                timeout: 50000,
                success: function (data, textStatus, jqXHR) {
                    if (data.ret == "0") {
                        global_playStatus.lastUpdateTime = data.status.updateTime;
                        onAudioStatusChange(data.status, data.serverTime);
                    }
                    waitForPlayerStatusChange();
                },

                error: function (data, status, e) {
                    setTimeout(function () {
                        waitForPlayerStatusChange();
                    }, 5000);
                }
            });
        };
    </script>

    <style>
        <!--

        .demo-container {
            border: 1px solid #009BE3;
            padding: 0 20px;
            font-family: "Myriad Pro Regular", "Trebuchet MS";
        }

        .demo-container a, .demo-container a:link, .demo-container a:visited, .demo-container a:hover, .demo-container a:focus, .demo-container a:active {
            color: #009BE3;
        }

        .demo-container ul {
            list-style-type: none;
            padding: 0;
            margin: 1em 0;
            width: 100%;
            overflow: hidden;
        }

        .demo-container ul span {
            color: #A0A600;
        }

        .demo-container li {
            float: left;
            margin-right: 1em;
        }

        .demo-container p span.track-name {
            color: #CC0090;
        }

        -->
    </style>

</head>
<body>

<div id="jquery_jplayer"></div>

<!-- Using the cssSelectorAncestor option with the default cssSelector class names to enable control association of standard functions using built in features -->

<div id="jp_container" class="demo-container">
    <ul>
        <li><span>Select a track : </span></li>
        <li><a href="http://luoo-mp3.kssws.ks-cdn.com/low/they/20140408.mp3" class="track track-default">Cro Magnon
            Man</a></li>
        <li> |</li>
        <li><a href="http://luoo-mp3.kssws.ks-cdn.com/low/luoo/radio344/07.mp3" class="track">The Separation</a></li>
        <li> |</li>
        <li><a href="http://luoo-mp3.kssws.ks-cdn.com/low/chinese/20150701.mp3" class="track">Lismore</a></li>
    </ul>
    <p>
        <span class="play-state"></span> :
        <span class="track-name">nothing</span>
        at <span class="extra-play-info"></span>
        of <span class="jp-duration"></span>, which is
        <span class="jp-current-time"></span>
    </p>
    <ul>
        <li><a class="jp-play" href="#">Play</a></li>
        <li><a class="jp-pause" href="#">Pause</a></li>
        <li><a class="jp-stop" href="#">Stop</a></li>
    </ul>
    <ul>
        <li>volume :</li>
        <li><a class="jp-mute" href="#">Mute</a></li>
        <li><a class="jp-unmute" href="#">Unmute</a></li>
        <li><a class="jp-volume-bar" href="#">|&lt;----------&gt;|</a></li>
        <li><a class="jp-volume-max" href="#">Max</a></li>
    </ul>
</div>

</body>
<body>

</body>
</html>